<template>
  <div>
    <custom-table
      :columns="columns"
      :query="queryParams"
      :row-btn="rowBtn"
      v-bind="$attrs"
      v-on="listeners"
      @tap-head-btn="onTapHeadBtn"
      @tap-row-btn="onTapRowBtn"
      @row-dblclick="onRowDbClick"
    >
    <!-- <template v-slot:type_name="{row,$index}">
      <el-tag>{{row.type_name}}</el-tag>
    </template> -->
    <template slot="after-head-button">
      <div style="display: flex;">
      <el-upload
    multiple
    :action="fileUrl"
    :headers="headers"
    :limit="limitNum"
    accept=".xls,.xlsx,csv"
    :file-list="fileList"
    :before-upload="beforeUpload"
    :on-exceed="onExceed"
    :on-success="onSuccess"
    :on-error = "onError"
    :show-file-list="showFileList">
			<!-- <el-button type="primary">导入</el-button> -->
      <el-button :loading="downloadLoadings"  class="filter-item" size="mini" type="primary" icon="el-icon-download">导入房间</el-button>
		</el-upload>
  </div>
    </template>
    </custom-table>
     <el-dialog
        title="租户"
        :visible.sync="Visible"
        :modal="true"
        :width="dialogWidths"
        top="10vh"
        append-to-body
      >
      <pop-up mode="pop" v-if="Visible" :arr="tableData" :column="tableHead" :hiddenHeadBtn="false" :hideRowBtn="true" :room_id="room_id"></pop-up>
  </el-dialog>
  </div>

</template>

<script>
import tableMixin from '@/utils/mixin/custom-table'
import { showLoading, hideLoading } from '@/utils'
import PopUp from '@/views/popup/index'
import curd from '@/api/curd'
import { getToken } from '@/utils/auth'
// import mock from '@/utils/mixin/mock'

// var Mock = require('mockjs')
// import { randomNum } from '@/utils'

export default {
  data() {
    return {
      repairUserVisible: false,
      Visible: false,
      tableData: [],
      tableHead: [],
      dialogWidths: '70%',
      title: '',
      room_id: '',
      columns: [
        // { name: '名称', field: 'name', width: 150 },
        { name: '房号', field: 'name', type: 'tag' },
        // { name: '租户', field: 'nickname', width: 150 },
        { name: '房型', field: 'room_type', type: 'tag', format(col, row) { return !row.type_name ? '房型已被删除' : row.type_name } },
        { name: '楼号', field: 'building_number', label: 'building', type: 'tag' },
        { name: '面积', field: 'roomType.area', after: 'm²', type: 'tag' },
        { name: '租金', field: 'roomType.amount', after: '元', type: 'tag' },
        // { name: '状态', field: 'status', label: true, type: this.checkAuth('change') ? 'switch' : 'tag', opts: {} },
        { name: '状态', field: 'status', type: 'tag', opts: {}, label: true },
        { name: '可住人数', field: 'use_people', type: 'tag', format(col, row) { return !row.type_name ? '请重新设置房型' : row.use_people + '/' + row.roomType.live_number } },
        { name: '性别', field: 'sex', type: 'tag', opts: {}, label: true },
        { name: '备注', field: 'textarea' },
        { name: '添加时间', field: 'create_time' }
      ],
      fileUrl: process.env.VUE_APP_BASE_API + 'v1/attachment/importRoomExcel', // 上传文件的域名地址
      limitNum: 1, // 文件上传个数限制
      fileList: [], // 文件列表
      showFileList: false, // 文件列表是否显示,默认不显示
      headers: {
        'Access-Token': getToken(),
        'X-Requested-With': 'XMLHttpRequest'
      },
      downloadLoadings: false
    }
  },
  components: {
    PopUp
  },
  mixins: [
    tableMixin
    // mock
  ],
  computed: {
    rowBtn() {
      return [
        {
          name: '详情',
          key: 'detail'
          // confirm: '确认查看详细信息？'
        }
      ]
    }
  },
  props: {},
  filters: {},
  created() {
  },
  methods: {
    // 文件上传类型
    // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet --- 后缀为 .xlsx
    // application/vnd.ms-excel --- 后缀为 .xls或.csv
    // 文件上传之前的钩子,可以做一些验证或限制
    beforeUpload(file) {
      console.log('beforeUpload', file)
      let regExp = file.name.replace(/.+\./, '')
      let lower = regExp.toLowerCase() // 把大写字符串全部转为小写字符串
      let suffix = ['xls', 'xlsx']
      if (suffix.indexOf(lower) === -1) {
        return this.$message.warning('请上传后缀名为 xls、xlsx 的附件 !')
      }
      this.downloadLoadings = true
      showLoading('导入中...')
      // let isLt2M = file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   return this.$message.error('请上传文件大小不能超过 2MB 的附件 !')
      // }
    },
    // 导入表格格式校验,后端已做验证，这个暂时不需要
    // beforeUpload(file) {
    //   // let regExp = file.name.replace(/.+\./, '');
    //   // let suffix = ['xls', 'xlsx'];
    //   // if (suffix.indexOf(regExp.toLowerCase()) === -1) {
    //   // 	return this.$message.warning('请上传后缀名为 xls、xlsx 的附件 !');
    //   // }
    // },
    // 文件超出个数限制时的钩子
    onExceed(files, fileList) {
      console.log('onExceed-files', files)
      console.log('onExceed-fileList', fileList)
      return this.$message.warning(`只能选择${this.limitNum}个文件,当前共选择了${files.length + fileList.length}个`)
    },
    // 文件上传成功时的钩子
    onSuccess(response, file, fileList) {
      console.log('onSuccess', response)
      console.log('onSuccess', file)
      console.log('onSuccess', response)
      hideLoading()
      this.onTapHeadBtnFlush({})
      this.fileList = []
      this.downloadLoadings = false
    },
    // 文件上传失败时的钩子
    onError() {
      this.fileList = []
      hideLoading()
      this.downloadLoadings = false
    },
    // 获取用户详情
    onTapRowBtnDetail(data) {
      var that = this
      console.log(data)
      // that.Visible = true
      // showLoading('刷新权限中...')
      // setTimeout(function() {
      //   console.log('我被点击了')
      //   that.repairUserVisible = true
      //   hideLoading()
      // }, 1500)
      that.room_id = data.id
      that.tableHead = [
        { name: '头像', field: 'avatar', type: 'image' },
        { name: '名称呀', field: 'real_name' },
        { name: '手机号', field: 'tel' },
        { name: '性别', field: 'sex' },
        { name: '工作单位', field: 'word_unit' }
      ]
      // that.title = '房间详情'
      showLoading('获取详情中...')
      curd('check_in').get('getLessee', data).then(res => {
        hideLoading()
        console.log('全部租户', res)
        var arr = ({ list: res.data })
        that.tableData = arr
        this.Visible = true
        // this.onTapHeadBtnFlush({})
      }, hideLoading)
    }
    /*
    onLoad() {
      Mock.Random.extend({
        roomType(date) {
          return this.pick(['单间', '一房一厅', '两房一厅', '三房一厅', '豪华套房'])
        },
        area() {
          return randomNum(50, 200)
        },
        amount() {
          return randomNum(500, 2000)
        },
        buildingName(data) {
          return this.pick(['A栋', 'B栋', 'C栋', 'D栋']) + randomNum(1, 999).toString().padStart(3, '0')
        },
        roomNo() {
          return '琼花湖' + randomNum(1, 10) + '栋' + randomNum(1, 999).toString().padStart(3, '0')
        }
      })
      var data = Mock.mock({
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|20': [{
          // 属性 id 是一个自增数，起始值为 1，每次增 1
          'id|+1': 1,
          'number': '@roomno',
          'nickname': '@cname',
          'area': '@area',
          'amount': '@amount',
          'create_time': '@now',
          'status': '启用',
          'room_type': '@roomtype',
          'name': '@buildingname'
        }]
      })

      console.log('mock', data)

      this.setMockData(data)
    }
    */
  }
}
</script>

<style lang="scss">

</style>
